<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>博客页面</title>
</head>

<body>
<!-- 左侧导航栏 -->
<nav class="sidebar">
<ul>
<li><a href=" ">博客园</a ></li>
<li><a href="#">首页</a ></li>
<li><a href="#">新随笔</a ></li>
<li><a href="#">草稿箱</a ></li>
<li><a href="#">联系</a ></li>
<li><a href="#">订阅</a ></li>
<li><a href="#">管理</a ></li>
<li><a href="#">CSDN主页</a ></li>
</ul>
</nav>

<!-- 主体内容区域 -->
<main class="main-content">
<!-- 头部展示区 -->
<header class="header-section">
    <img src="1.jpg" alt="头部背景图" class="header-bg">
<div class="header-info">
<img src="2.jpg" alt="头像" class="avatar">
<h1 class="username">LogicYarn</h1>
<a href="#" class="follow-btn">+关注</a >
<p class="user-stats">园龄：10个月 粉丝：0 关注：4</p >
<p class="motto">有理想，但不妄想。有希望，但不奢望。有作为，但不妄为。</p >
</div>
<nav class="header-nav">
<a href="#">收藏</a >
<a href="#">闪存</a >
<a href="#">小组</a >
<a href="#">博问</a >
</nav>
</header>

<!-- 文章列表区 -->
<section class="article-list">
<article class="article">
<h2 class="article-title">博客园博客申请教程，附自定义漂亮主页样式详细教程---2024</h2>
<p class="article-summary">摘要：最近在自定义博客园主题页面样式时，遇到一些问题。所以决定写下此文作为第一篇博客。</p >
<p class="article-content">一、申请开通个人博客 1.1注册账号（步骤略） 1.2申请写博客权限 在注册完博客园账号后，在首页右上角点击 -> 我的博客 点击后，会出现如下图所示：按照要求填写申请理由（例如记录个人技术成长，学习笔记记录等）</p >
<div class="article-meta">
<span class="views">6</span>
<span class="comments">0</span>
<span class="likes">0</span>
<button class="edit-btn">编辑</button>
<button class="read-btn">阅读</button>
</div>
</article>
<article class="article">
<h2 class="article-title">一名ICer的博客开帖记录</h2>
<p class="article-summary">摘要：前言 看园子内容已有3 - 4年之久，虽然对于一名ICer来说，园子内容偏少。但是仍然“咸鱼IC”等一众大佬的优质好文，让我知道这是我未来学习技术的一个好地方。也在我心中埋下了一个未来自己也要开始撰写博文的念想，选择园子，希望能够在记录学习笔记的同时，也为开源世界贡献自己的力量！由于本人有较重度的“健</p >
<div class="article-meta">
<span class="views">5</span>
<span class="comments">0</span>
<span class="likes">0</span>
<button class="edit-btn">编辑</button>
<button class="read-btn">阅读</button>
</div>
</article>
</section>
</main>

<!-- 右侧边栏 -->
<aside class="sidebar-right">
<div class="calendar-section">
<img src="3.jfif" alt="日历图片" class="calendar-img">
<p class="calendar-title">Autumn Wonderland</p >
<p class="calendar-date">14 Aug, 2024</p >
<table class="calendar-table">
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td class="current-day">14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
<div class="links-section">
<h3 class="links-title">常用链接</h3>
<a href="#" class="link-item">我的随笔</a >
<a href="#" class="link-item">我的评论</a >
<a href="#" class="link-item">我的参与</a >
<a href="#" class="link-item">最新评论</a >
<a href="#" class="link-item">我的标签</a >
</div>
<div class="tags-section">
<h3 class="tags-title">我的标签</h3>
<span class="tag-item">博客撰写(1)</span>
</div>
</aside>
<script src="script.js"></script>
</body>

</html>